<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>

</body>
<script type="module">
	// 1- 基本用法
	// // 引入模块，模块的地址为./modules/mo1.js,并绑定模块提供的数据a,b,c,obj,fn,my
	// import {a,b,c,obj,fn,my} from "./modules/mo1.js";
	// console.log(a,b,c);// 1 2 3
	// console.log(obj);// {userName:"zhangsan",age:12,d:100}
	// fn();// fn undefined
	// console.log(this);// undefined
	//
	// // a = 200;// 不允许直接更改引入过来的数据，会有异常
	// // console.log(a);
	//
	// // 通过函数来修改绑定的数据a
	// my(200);
	// console.log(a);// 200
	
	
	// 2- 解决冲突
	// import {a as aa} from "./modules/mo2.js";
	// import {a} from "./modules/mo1.js";
	// console.log(a,aa);// 1  100
	
	// 3- 命名空间
	// import * as suibian from "./modules/mo3.js";
	// console.log(suibian.a);// 1
	// console.log(suibian.b);// 2
	// console.log(suibian.c);// 3
	// console.log(suibian.d);// 4
	// console.log(suibian.e);// 5
	
	// 4- 其它导出的形式:解构赋值
	// import {userName,age} from "./modules/mo4.js";
	// console.log(userName,age);//zhangsan 12
	
	// 5- 其它导出的形式:先定义再导出
	// import {userName,info,fn,myAge} from "./modules/mo5.js";
	//
	// console.log(userName,myAge,info);// zhangsan 12 {a:1,b:2,c:3}
	// fn();// fn
	
	// 6- 默认导出:在引入时不需要使用{}
	// import suibian from "./modules/mo6.js";
	//
	// console.log(suibian);// {a:1}
	
	// 7- 混合导出
	// // fn必须写在左边，{}写在右边
	// import fn,{a,b,c,d} from "./modules/mo7.js";
	// fn();
	// console.log(a,b,c,d);
	
	// 8- 先定义再导出
	// import aa,{a,b,c,d,fn} from "./modules/mo8.js";
	//
	// console.log(a,b,c,d);
	// aa();
	
	// 9- 省略绑定：引入的模块往往有时不需要导出任何数据。
	// import "./modules/mo9.js";// 执行mo9.js
	// const arr = [1,2,3,4];
	// console.log(arr.last())
	// console.log(a);// ReferenceError: a is not defined
	
	// 10- 动态绑定
	
	// 10-1- 引入模块不允许写在函数中
	// function fn(){
	// 	// 引入模块不允许写在函数中
	// 	import mo10 from "./modules/mo10.js"
	// }
	// fn();
	
	// 10-2- 不允许将引入的地址放置在常量或变量中
	// let myUrl = "./modules/mo10.js";
	// import mo10 from myUrl;
	// console.log(mo10)
	
	// 可以动态引入
	// 以下mo10是一个Promise实例
	// const mo10 = import("./modules/mo10.js");
	
	// then1：先赋值再使用
	// const mo10 = import("./modules/mo10.js");
	// mo10.then(value=>{
	// 	console.log(value.a,value.b,value.c,value.default);
	// })
	
	// then2：链式调用
	// import("./modules/mo10.js").then(value=>{
	// 	console.log(value.a,value.b,value.c,value.default);
	// })
	
	// then3:解构赋值
	// import("./modules/mo10.js").then(({a,b,c,default:suibian})=>{
	// 	console.log(a,b,c,suibian);
	// })
	
	// async await
	// (async function(){
		// const mo10 = await import("./modules/mo10.js");
		// console.log(mo10.a,mo10.b,mo10.c,mo10.default)
		
		// const {a,b,c,default:mo10} = await import("./modules/mo10.js");
		// console.log(a,b,c,mo10)
	// })();
	
	// const {a,b,c,default:mo10} = await import("./modules/mo10.js");
	// console.log(a,b,c,mo10)
	
	// let myUrl = "./modules/mo10.js";
	// import(myUrl).then(value=>{
	// 	console.log(value.a,value.b,value.c,value.default)
	// })
	
	
	// 11- 模块如果引入多次只会在第一次引入时执行。并将暴露的数据进行缓存
	//     第二次引入只会从缓存中提取数据。
	import suibian,{userName as userName2} from "./modules/mo11.js";
	import suibian2,{userName} from "./modules/mo11.js";
	
	console.log(suibian === suibian2);// true
	console.log(suibian.d);
	
</script>
</html>